<template>
    <div class="contract-item" :class="isOpen ? type === 2 ? 'contract-item-active1' : type === 0 ? 'contract-item-active' : 'contract-item-active2' : ''">
        <div @click="onOpen">
            <div class="contract-item_head l-f l-row-sb">
                <div class="contract-item_head_left l-f">
                    <img class="contract-item_head_left_icon" src="@/assets/icons/icon-coin-up.svg" />
                    <p class="contract-item_head_left_label">Tether Gold {{COIN.name}}/USDT</p>
                </div>
                <img class="contract-item_head_right" :class="isOpen ? 'contract-item_head_right-active' : ''" src="@/assets/icons/icon-down_bold.svg" alt="">
            </div>
            <div v-if="options.status !== 0" class="contract-item_desc l-f l-row-ad">
                <p class="contract-item_desc_label">{{$t('account.unrealizedPNLROE')}}</p>
                <p v-if="options.status == 3" class="contract-item_desc_value" :class="Number(options.fact_profits) > 0 ? 'color-green' : 'color-red'">{{numberFormat(options.fact_profits)}} </p>
                <p v-else-if="options.status === 4" class="contract-item_desc_value color-red">0.00</p>
                <p v-else class="contract-item_desc_value" :class="profits > 0 ? 'color-green' : 'color-red'">{{profits}} </p>
            </div>
        </div>
         <div class="contract-item_list l-f l-wrap l-column l-col-start l-col-stretch">
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.direction')}}</p>
                <p class="contract-item_list_item_value" :class="profits > 0 ? 'color-green' : 'color-red'">{{profits > 0 ? $t('account.up') : $t('account.down')}}</p>
            </div>
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.entryPrice')}}</p>
                <p class="contract-item_list_item_value">{{numberFormat(options.price)}}</p>
            </div>
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.currentPrice')}}</p>
                <!-- <p class="contract-item_list_item_value">{{ options.status == 3 ? numberFormat(options.update_price) : dayMarket.close  }}</p> -->
                 <p class="contract-item_list_item_value">{{ dayMarket.close  }}</p>
            </div>
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.margin')}}</p>
                <p class="contract-item_list_item_value">{{numberFormat(options.caution_money)}}</p>
            </div>
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.triggerPrice')}}</p>
                <p class="contract-item_list_item_value">{{parseFloat(options.target_profit_price) > 0 ? numberFormat(options.target_profit_price) : '-'}} / {{parseFloat(options.stop_loss_price) > 0 ? numberFormat(options.stop_loss_price) : '-'}} </p>
            </div>
            <div class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.entryTime')}}</p>
                <p class="contract-item_list_item_value">{{options.transaction_time}}</p>
            </div>
             <div v-if="type == 2" class="contract-item_list_item l-f l-row-sb">
                <p class="contract-item_list_item_label">{{$t('account.exitTime')}}</p>
                <p class="contract-item_list_item_value">{{options.handle_time}}</p>
            </div>
        </div>
        <div class="contract-item_btns">
            <a-button @click="onClose" v-if="options.status == 1" class="contract-item_btns_btn" type="primary">{{$t('account.closePosition')}}</a-button>
            <a-button @click="onCancel" v-if="options.status == 0" class="contract-item_btns_btn" type="primary">{{$t('account.cancel')}}</a-button>
            <a-button v-if="type === 2 || type === 3" @click="goPage('/contractTrading')" class="contract-item_btns_btn" type="primary">{{$t('account.openAnotherPosition')}}</a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { COIN } from '@/common';
import { numberFormat, throttle } from '@/utils/index.js'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

import { postContractCloseApi, postContractCancelApi } from '@/api/tradeApi'

const mainStore = useMainStore()
const router = useRouter()

const props = defineProps({
    type: {
        type: Number,
        default: 0
    },
    options: {
        type: Object,
        default: function() {
            return {}
        }
    }
})

const emits = defineEmits(['close'])

const dayMarket = computed(() => {
    return mainStore.dayMarket
})

const profits = computed(() => {
    let options = props.options
    if(dayMarket.value.close) {
        if(options.type == 1) {
            //  盈亏 =（当前价-开仓价）×手数×杠杆
            return numberFormat((Number(dayMarket.value.close) - Number(options.origin_price)) * Number(options.share) * Number(options.multiple));
        }else {
            //  盈亏 =（开仓价-当前价）×手数×杠杆
            return numberFormat((Number(options.origin_price) - Number(dayMarket.value.close)) * Number(options.share) * Number(options.multiple));
        }
    }
    return '-'
})

const isOpen = ref(false)

const onOpen = () => {
    isOpen.value = !isOpen.value
}
const goPage = (path) => {
    router.push(path)
}

// 平仓
const onClose = throttle(async () => {
    const res = await postContractCloseApi({
        id: props.options.id
    })
    message.success(res)
    emits('close')
},3000) 

// 取消
const onCancel = throttle(async () => {
    const res = await postContractCancelApi({
        id: props.options.id
    })
    message.success(res)
    emits('close')
},3000)
</script>

<style lang="scss" scoped>
.contract-item {
    background-color: #00000030;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    margin-bottom: 15px;
    height: 100px;;
    overflow: hidden;
    position: relative;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
    &::before {
        content: "";
        display: block;
        background: linear-gradient(118.58deg, #d3b25b 21.42%, #f0d180 67.63%);
        opacity: .7;
        position: absolute;
        left: 0;
        border-radius: 2px;
        height: 24px;
        width: 4px;
    }
    &_head {
        padding-bottom: 15px;
        box-sizing: border-box;
        border-bottom: 1.5px solid rgba(184,184,184,.06);
        cursor: pointer;
        &_left {
            &_icon {
                width: 20px;
                height: 20px;
            }
            &_label {
                font-size: 14px;
                color: #ffffff;
                margin-left: 10px;
            }
        }
        &_right {
            width: 18px;
            height: 18px;
            transition: transform .5s;
        }
        &_right-active {
            transform: rotate(180deg);
        }
    }
    &_desc {
        height: 40px;
        &_label {
            font-size: 10px;
            color: #ffffff4d;
        }
        &_value {
            font-size: 10px;
            color: #4daa98;
        }
        &_value-red {
            color: #de5648;
        }
    }
    &_list {
        &_item {
            margin: 6px 0;
            &_label {
                color: #ffffff;
                opacity: .3;
            }
            &_value {
                color: #ffffff;
            }
        }
    }
    &_btns {
        margin-top: 15px;
        &_btn {
            width: 100%;
        }
    }
}
.contract-item-active {
    height: 400px;
}
.contract-item-active1 {
    height: 400px;
}
.contract-item-active2 {
    height: 370px;
}
@media only screen and (max-width: 1200px) {
    .contract-item {
        background-color: #191934;
        &_list {
            max-height: none;
        }
    }
}
</style>